<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的最后一个完美的案例</title>
	</head>
	<body>
		<script type="text/javascript">
			
			/* 这段代码有3个回调函数。 */
			/* 最外层的回调函数是在load事件发生之后才会执行！ */
			window.onload = function(){
			
				/* //给id="btn1"的元素绑定鼠标单击
				var btn1Elt = document.getElementById("btn1");
				btn1Elt.onclick = function(){ // btn1被单击click之后,这个事件发生了,才会执行这个回调函数
					console.log("按钮1被点击了！")
				}
				
				//给id="btn2"的元素绑定鼠标单击
				var btn2Elt = document.getElementById("btn2");
				btn2Elt.onclick = function(){// btn2被单击click之后,这个事件发生了,才会执行这个回调函数
					console.log("按钮2被点击了！")
				} */
				
				document.getElementById("btn1").onclick = function(){
					console.log("按钮1单击")
				}
				
				document.getElementById("btn2").onclick = function(){
					console.log("按钮2单击")
				}
				
				document.getElementById("username").onblur = function(){
					console.log("失去焦点了")
				}
				
			}
			
		</script>
		
		<input type="button" id="btn1" value="按钮1"/>
		<br>
		<input type="button" id="btn2" value="按钮2"/>
		<br>
		<input type="text" id="username" />
		
	</body>
</html>
